<template>
  <div class="priva-wrap">
    <div id="privaPdf"></div>
    <div class="bottom-wrap">
      <button
        v-if="currentIndic !== 0"
        :class="['pre-button', !currentItem.goNextFine ? 'normal': 'highlight']"
        type="link"
        :disabled="!currentItem.goNextFine"
        @click="backup"
      >
        <!-- <image class="img" src="/subPackageImages/static/leftNext.png"/> -->
        上一步
      </button>
      <button
        :class="['next-button', !currentItem.goNextFine ? 'normal': 'highlight']"
        type="link"
        :disabled="!currentItem.goNextFine"
        @click="goNextGui(currentItem)"
      >
        {{ `${ currentItem.currentSecond ?`滑动到最底部 (${currentItem.currentSecond}s)` : ( currentItem.goNextFine ? '确认同意' : '滑动到最底部' ) }` }}
        <!-- <image class="img" src="/subPackageImages/static/rightNext.png"/> -->
      </button>
    </div>
  </div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import wx from 'weixin-js-sdk'
import 'pdfh5/css/pdfh5.css'
import { getUrlQuery } from '@/utils/util'
import { getAgreements } from '@/api/projectInfo/projectInfo'

export default {
  name: 'privaOfAu',
  data () {
    return {
      pdfh5: null,
      currentItem: [],
      currentIndic: 0,
      agreementList: []
    }
  },
  watch: {
    // 'pdfh5.cacheNum': function (value) {
    //   if (this.currentItem.totalNum && (value + 1) > this.currentItem.totalNum) {
    //     this.scrollReaded()
    //   }
    //   //  document.getElementsByClassName('pageNow')[0].innerText
    // }
  },
  mounted () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      const paramsResult = getUrlQuery(window.location.href)
      this.paramsResult = paramsResult
      const res = await getAgreements({
        pin: paramsResult.pinCode || ''
      }, { token: paramsResult.token })
      this.agreementList = res
      this.setPdfUrl()
    },
    setPdfUrl () {
      if (!this.agreementList.length) {
        const jumpUrl = this.paramsResult.pinCode ? `/pages/subject/agreement?h5Pdf=1&secondPinJoin=1&pinCode=${this.paramsResult.pinCode}` : `/pages/subject/agreement?h5Pdf=1&proId=${this.paramsResult.proId}`
        wx.miniProgram.navigateTo({
          url: jumpUrl
        })
        return
      }
      this.currentItem = this.agreementList[this.currentIndic] || {}
      this.$nextTick(() => {
        this.pdfh5 = new Pdfh5('#privaPdf', {
          pdfurl: 'https://minio-cluster.primelifescience.com.cn' + this.currentItem.url,
          scale: 2,
          lazy: false,
          loadingBar: true,
          cMapUrl: 'https://minio-cluster.primelifescience.com.cn/consent/unpkg/pdfjs-dist@2.0.943/cmaps/'
        })
        this.pdfh5.on('complete', () => {
          this.currentItem.totalNum = this.pdfh5.totalNum
          const containerHeight = document.getElementById('privaPdf').offsetHeight
          const pdfHeight = document.getElementsByClassName('pdfViewer')[0].offsetHeight
          if (!this.currentItem.secondReaded && pdfHeight <= containerHeight) {
            this.scrollReaded()
          }
          if (!this.currentItem.secondReaded) {
            this.currentItem.currentSecond = this.currentItem.payload ? (isNaN(Number(this.currentItem.payload)) ? 5 : Number(this.currentItem.payload)) : 5
            this.currentItem.currentSecond ? this.calSecond() : this.secondReaded()
          }
        })
        this.pdfh5.on('scroll', (scrollTop) => {
          const containerHeight = document.getElementById('privaPdf').offsetHeight
          const pdfHeight = document.getElementsByClassName('pdfViewer')[0].offsetHeight
          if (scrollTop + containerHeight >= pdfHeight - 10 && scrollTop < pdfHeight) {
            this.scrollReaded()
          }
        })
        // console.log('this.pdfh5.pageNumthis.pdfh5.pageNumthis.pdfh5.pageNum', this.pdfh5.cacheNum);
      }, 200)
      document.title = this.currentItem.name
    },
    scrollReaded () {
      const result = this.currentItem
      result.scrollReaded = true
      this.goNextFine(result)
    },
    secondReaded () {
      const result = this.currentItem
      result.secondReaded = true
      this.goNextFine(result)
    },
    calSecond () {
      const result = this.currentItem
      const timer = setInterval(() => {
        if (result.currentSecond > 0) {
          result.currentSecond--
        } else {
          this.secondReaded()
          clearInterval(timer)
        }
        this.$forceUpdate()
      }, 1000)
    },
    backup () {
      this.currentIndic--
      this.setPdfUrl()
    },
    goNextGui () {
      this.addLog()
      if (this.currentIndic === this.agreementList.length - 1) {
        const jumpUrl = this.paramsResult.pinCode ? `/pages/subject/agreement?h5Pdf=1&secondPinJoin=1&pinCode=${this.paramsResult.pinCode}` : `/pages/subject/agreement?h5Pdf=1&proId=${this.paramsResult.proId}`
        wx.miniProgram.navigateTo({
          url: jumpUrl
        })
        return
      }
      this.currentIndic++
      this.setPdfUrl()
    },
    goNextFine (result) {
      if (result.secondReaded && result.scrollReaded) {
        result.goNextFine = true
        this.$forceUpdate()
        return
      }
      result.goNextFine = false
    },
    addLog () {
      const { id: agreementId } = this.agreementList[this.currentIndic]
      console.log('agreementId', agreementId)
      // addAgreementViewLog({ agreementId, proId }, { token: this.paramsResult.token })
    }
  }
}
</script>
<style scoped lang="less">
  .priva-wrap{
    width: 100vw;
    height: 100vh;
    padding-bottom: 80px;
    .bottom-wrap{
      position: absolute;
      z-index: 99;
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      margin: auto;
      width: 80%;
      .pre-button{
        align-items: center;
        display: flex;
        justify-content: center;
        height: 40px;
        margin-right: 5px;
        background-color: #0087E1;
        color: #fff;
        flex-grow: 1;
        border-width: 0;
        border-radius: 5px;
        .img{
          width: 25px;
          height: 25px;
        }
      }
      .next-button{
        margin-left: 5px;
        color: #fff;
        flex-grow: 4;
        align-items: center;
        display: flex;
        justify-content: center;
        height: 40px;
        border-width: 0;
        border-radius: 5px;
        .img{
          width: 25px;
          height: 25px;
        }
      }
      .highlight{
        background-color: #0087E1;
      }
      .normal{
        background-color: #D9D9D9;
      }
    }
  }
</style>
